<%--
  Created by IntelliJ IDEA.
  User: xinlong
  Date: 2017/10/15
  Time: 1:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <%@include file="/resources/common/head.jsp" %>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: Microsoft Yahei;
        }
        body{
            background: url(/resources/images/register-background.png) no-repeat top center;
        }
        #container{
            width: 100%;
            position: absolute;
        }
        #header{
            width: 100%;
            height: 100px;
        }
        .header-panel{
            margin: 0px auto;
            max-width: 1200px;
            height: 100px;
        }
        .header-panel img{
            display: inline-block;
            padding-top: 10px;
            padding-bottom: 10px;
            max-height: 80px;
            float: left;
        }
        .header-panel-text{
            display: inline-block;
            margin-top: 25px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            color: #333;
            border-left: 1px solid #efefef;
            padding-left: 20px;
            float: left;
        }
        #center{
            width: 100%;
        }
        .center-panel{
            margin: 0px auto;
            padding-top: 40px;
            padding-left: 50px;
            padding-right: 50px;
            max-width: 800px !important;
            height: 500px;
        }
        .layui-container{
            max-width: 700px !important;
            padding: 50px;
            background: RGBA(0,0,0,0.4);
            color: #fff;
            border-radius:25px;
        }
        #footer{
            width: 100%;
        }
        .footer-panel{
            margin: 0px auto;
            max-width: 1200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="header-panel">
            <img src="/resources/images/icon/威旅商标-黑.png">
            <div class="header-panel-text">
                欢迎注册
            </div>
        </div>
    </div>
    <div id="center">
        <div class="center-panel">
            <div class="layui-container">
                <form id="register" class="layui-form" action="javascript:commit()">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required  lay-verify="required" placeholder="请输入账户" autocomplete="off" class="layui-input " onblur="javascript: checkValidUsername()">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input " onblur="javascript: checkValidPhone()">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电子邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" required  lay-verify="required|email" placeholder="请输入电子邮箱" autocomplete="off" class="layui-input " onblur="javascript: checkValidEmail()">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">找回问题</label>
                        <div class="layui-input-block">
                            <input type="text" name="question" required  lay-verify="required" placeholder="请输入找回密码的问题" autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">找回答案</label>
                        <div class="layui-input-block">
                            <input type="text" name="answer" required  lay-verify="required" placeholder="请输入找回密码的答案" autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="commit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="footer-panel">

        </div>
    </div>
</div>

<script>
    layui.config({
        base: '/resources/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use('index'); //加载入口


    function checkValidUsername(){
        $.ajax({
            type:"post",
            url:"/user/checkValid.do",      // 这里是提交到什么地方的url
            data:{
                "str": $("input[name='username']").val(),
                "type": "username"
            },            // 这里把表单里面的数据放在这里传到后台
            dataType:"json",
            //async: false,       //设置ajax请求为同步，防止发送请求后执行success代码异常
            success:function(res){
                layer.tips(res.msg, "input[name='username']",{
                    tipsMore: true
                });
            },
            error:function(res){
                layer.tips(res.msg, "input[name='username']",{
                    tipsMore: true
                });
            }
        });
    }

    function checkValidEmail(){
        $.ajax({
            type:"post",
            url:"/user/checkValid.do",      // 这里是提交到什么地方的url
            data:{
                "str": $("input[name='email']").val(),
                "type": "email"
            },            // 这里把表单里面的数据放在这里传到后台
            dataType:"json",
            //async: false,       //设置ajax请求为同步，防止发送请求后执行success代码异常
            success:function(res){
                layer.tips(res.msg, "input[name='email']",{
                    tipsMore: true
                });
            },
            error:function(res){
                layer.tips(res.msg, "input[name='email']",{
                    tipsMore: true
                });
            }
        });
    }

    function checkValidPhone(){
        $.ajax({
            type:"post",
            url:"/user/checkValid.do",      // 这里是提交到什么地方的url
            data:{
                "str": $("input[name='phone']").val(),
                "type": "phone"
            },            // 这里把表单里面的数据放在这里传到后台
            dataType:"json",
            //async: false,       //设置ajax请求为同步，防止发送请求后执行success代码异常
            success:function(res){
                layer.tips(res.msg, "input[name='phone']",{
                    tipsMore: true
                });
            },
            error:function(res){
                layer.tips(res.msg, "input[name='phone']",{
                    tipsMore: true
                });
            }
        });
    }

    //绑定提交事件
    function commit() {
        var status = 1;
        //发送请求
        $.ajax({
            type:"post",
            url:"/user/register.do",      // 这里是提交到什么地方的url
            data:$('#register').serialize(),            // 这里把表单里面的数据放在这里传到后台
            dataType:"json",
            async: false,       //设置ajax请求为同步，防止发送请求后执行success代码异常
            success:function(res){
                if(res.status==0){
                    status = 0;
                    layer.msg(res.msg+",3秒后跳转至登录页", {icon: 6});
                }else {
                    layer.msg(res.msg, {icon: 5});
                }
            },
            error:function(res){
                if(res.status==0){
                    status = 0;
                    layer.msg(res.msg+",3秒后跳转至登录页", {icon: 6});
                }else {
                    layer.msg(res.msg, {icon: 5});
                }
            }
        });
        if(status == 0) {
            setTimeout("javascript:location.href=wetravel.URL.login()", 3000);
        }
    }
</script>
</body>
</html>